<template>
	<view class="container">
		<!-- 顶部 -->
		<view style="width: 100%;height: 10%;margin-bottom: 32px;" >
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="http://101.43.223.224:8765/image/getImageById?id=6756" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
					>
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="../../../static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 中心 -->
		<view style="display: flex; align-items: center;">
		  <view @click="navigateBack">
			  <uni-icons type="arrow-left" size="30" style="margin-left: 50rpx;"></uni-icons>
		  </view>	
		  <view style="margin-left: 10rpx; margin-left: 210rpx;">减肥食谱</view>
		</view>
		<view style="width: 100%;height: 50%;">
			<view @click="goParticulars(0)" style="box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2);opacity: 0.8;width: 90%;height: 170rpx;background-color: #CBEEE3;margin: auto;border-radius: 25rpx;margin-top: 20rpx;">
				<view style="opacity: 1;width: 16%;height: 21px;background-color: #95F1B2;border-radius: 5rpx;margin-left: 20rpx;"><text style="font-size: 28rpx;text-align: center;">素食者</text></view>
				<text style="font-size: 38rpx;font-weight: bold;margin: 30rpx 0rpx 0rpx 50rpx;">纯素食主义</text>
				<view><image src="../../../static/Rectangle（1）.png" style="width: 170rpx;height: 170rpx;margin: -47px 0px 0px 290px;"></image></view>	
			</view>
			<view @click="goParticulars(1)" style="box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2);opacity: 0.8;width: 90%;height: 170rpx;background-color: #E2C3C4;margin: auto;border-radius: 25rpx;margin-top: 20rpx;">
				<view style="opacity: 1;width: 16%;height: 21px;background-color: #E87C74;border-radius: 5rpx;margin-left: 20rpx;"><text style="font-size: 28rpx;text-align: center;">肉食者</text></view>
				<text style="font-size: 38rpx;font-weight: bold;margin: 30rpx 0rpx 0rpx 50rpx;">纯肉食主义</text>
				<view><image src="../../../static/Rectangle（2）.png" style="width: 170rpx;height: 170rpx;margin: -47px 0px 0px 290px;"></image></view>	
			</view>
			<view @click="goParticulars(2)" style="box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2); opacity: 0.8; width: 90%; height: 170rpx; background-color: #D5D3BC; margin: auto; border-radius: 25rpx; margin-top: 20rpx;">
			    <view style="opacity: 1;width: 17%;height: 21px;background-color: #E7B06B; border-radius: 5rpx;margin-left: 20rpx;"><text style="font-size: 28rpx; text-align: center;">生酮饮食</text></view>
			    <text style="font-size: 38rpx;font-weight: bold;margin: 30rpx 0rpx 0rpx 50rpx;">低碳食主义</text>
				<view><image src="../../../static/Rectangle.png" style="width: 170rpx;height: 170rpx;margin: -47px 0px 0px 290px;"></image></view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{},
				list:[{
					principle: '纯素食主义',
					eat: '素食者'
				},{
					principle: '纯肉食主义',
					eat: '肉食者'
				},{
					principle: '低碳食主义',
					eat: '生酮饮食'
				}]
			}
		},
		onLoad(option) {
			this.item = option.item //打印出上个页面传递的参数。
			console.log("******************我是更多食谱",this.item)
		},
		created() {
			
		},
		methods: {
			//返回上一页
			navigateBack(){
				uni.navigateBack({
					delta: 1 // 返回上一页，可根据实际情况调整delta值
				});
			},
			//食谱详情页面
			goParticulars(item){
				uni.navigateTo({
					url: '/pages/student/index/particulars?items=' +JSON.stringify(item)
				})
			}
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		width: 100%;
		height: 100vh;
		 /* display: flex; */
		justify-content: center;
		align-items: center;
		background-image: url('http://101.43.223.224:8765/image/getImageById?id=6755');
		background-size: cover; /* 使背景图片覆盖整个页面 */
		/* background-repeat:repeat-y; /* 根据y轴重复显示背景图片 */  
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
</style>